<template>
	<view class="process">

		<canvas style="width: 500rpx; height: 500rpx;" class="canvas-content" :canvas-id="canvasId" :id="canvasId">
		</canvas>

		<!-- <view class="box0-parent">
			<view class="box0" :style="box0Style">
			</view>
		</view>
		<view class="box1-parent">
			<view class="box1" :style="box1Style">
			</view>
		</view> -->
		<view class="input-range">
			<text> {{ percent }}%</text> 
			<text style="margin-left: 100rpx;"> {{ percent * 3.6 }} </text>
			
			<slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
				backgroundColor="#000000" block-color="#8A6DE9"></slider>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			size: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				percent: 60,
				canvasId: 'canvasId',
				canvasContent: null,
				startAngle: -Math.PI / 2, //canvas画圆的起始角度，默认为3点钟方向即90度 方向，定位位到12位置 0度
			}
		},
		computed: {
			box0Style() {
				if (this.percent >= 50) {
					return `transform: rotate(${180 + this.percent*3.6}deg)`
				} else {
					return ``
				}
			},
			box1Style() {
				if (this.percent <= 50) {
					return `transform: rotate(${this.percent*3.6}deg)`
				} else {
					return `display: none;`
				}
			}
		},
		mounted() {
			this.canvasContent = uni.createCanvasContext(this.canvasId, this)
			this.drawCircleByProgress()
		},
		methods: {
			onChange(value) {
				// console.log(value.detail.value)
				this.percent = value.detail.value
				this.drawCircleByProgress()
			},
			drawCircleByProgress() {
				console.log('this.canvasContent', this.canvasContent)
				if (!this.canvasContent) {
					return
				}
				// 表示进度的两端为圆形  目前没有找到只设置一段的方式
				this.canvasContent.setLineCap('round'); //圆形     
				this.canvasContent.setLineCap('square'); //方形

				let width = uni.upx2px(10)

				// 设置线条的宽度和颜色
				this.canvasContent.setLineWidth(width);
				this.canvasContent.setStrokeStyle('#ff0000');

				let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;

				this.canvasContent.beginPath();
				// 半径为整个canvas宽度的一半
				let radius = uni.upx2px(284) / 2;
				this.canvasContent.arc(radius, radius, radius - width, this.startAngle, endAngle, false);
				this.canvasContent.stroke();

				//原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
				let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
				let p0y = radius + Math.sin(endAngle + .1) * (radius - width)


				this.canvasContent.beginPath()
				this.canvasContent.arc(p0x, p0y, width / 2, 0, 2 * Math.PI)
				this.canvasContent.setFillStyle('#F0AD4E');
				this.canvasContent.fill()

				this.canvasContent.beginPath()
				this.canvasContent.arc(p0x, p0y, width * 0.4, 0, 2 * Math.PI)
				this.canvasContent.setFillStyle('#FFFFFF');
				this.canvasContent.fill()

				this.canvasContent.draw();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process {
		width: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.canvas-content {
			width: 284rpx;
			height: 284rpx;
			background-color: #059cdd;
		}

		.input-range {
			position: absolute;
			top: 750rpx;
			width: 300rpx;
			background-color: #000;
			z-index: 999;
		}

		.box0-parent {
			position: absolute;
			top: 380rpx;
			width: 284rpx;
			height: 284rpx;
			background-color: #dd2124;
			clip: rect(0px, 142rpx, 284rpx, 0px);
			.box0 {
				position: absolute;
				top: 0;
				width: 284rpx;
				height: 284rpx;
				background-color: #2168F9;
				clip: rect(0px, 142rpx, 284rpx, 0px);
				border-radius: 50%;
			}
		}

		.box1-parent {
			position: absolute;
			top: 380rpx;
			width: 284rpx;
			height: 284rpx;
			background-color: #dd2124;
			clip: rect(0px, 284rpx, 284rpx, 142rpx);

			.box1 {
				position: absolute;
				top: 0;
				width: 284rpx;
				height: 284rpx;
				background-color: #2168F9;
				clip: rect(0px, 284rpx, 284rpx, 142rpx);
				border-radius: 50%;
			}
		}

	}
</style>